
<template>

  <div>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row class="brr" justify="space-around">
        <van-col  span="4" >姓名</van-col>
        <van-col span="4" >年龄</van-col>
        <van-col span="4">学号</van-col>
      </van-row>
      <van-row class="br" justify="space-around" v-for="item in list" :key="item.name">
        <van-col span="4" >{{ item.name }}</van-col>
        <van-col span="4" >{{ item.age }}</van-col>
        <van-col span="4" >{{ item.num }}</van-col>
      </van-row>

      <van-cell />
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import pageObject from "../../js/getObject";

const list = reactive([]);
const loading = ref(false);
const finished = ref(false);

let t = ref(1);
const onLoad = () => {
  console.log(list.length);

  if (list.length >= 40) {
    finished.value = true;
    return;
  }
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  let arr = pageObject.getPageObject(t.value++);

  for (let index = 0; index < arr.length; index++) {
    list.push(arr[index]);
  }
  // 加载状态结束
  loading.value = false;
};
</script>

<style scoped>

.br{
    font-size: 18px;
    border-bottom: 1px solid beige ;
    margin: 10px 20px;
}
.brr{
    font-size: 24px;
    border-bottom: 1px solid red;
}
</style>